<script setup lang="ts">
import { request } from '@/api'
import { closeToast, showLoadingToast, showToast } from 'vant'
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

//1 地址
const address = ref<AddressItem>({} as AddressItem)
const route = useRoute()
onMounted(async () => {
  if (route.params.id) {
    showLoadingToast({ message: '加载中...', duration: 0, forbidClick: true })
    document.title = '编辑地址'
    const res = await request.get<MkResponse<AddressItem>>(
      `member/address/${route.params.id}`,
    )
    address.value = res.data.result
    closeToast()
  } else {
    document.title = '添加地址'
    address.value.isDefault = 1
  }
})

//2 选择地区
const showLocationPopup = ref(false)
const areaColumns = ref<AreaColumns>()
onMounted(async () => {
  const data = await mk.getAreaColumns()
  areaColumns.value = data
})
const onSelectedLocation = (data: { selectedValues: number[] }) => {
  if (!address.value) return
  address.value.provinceCode = data.selectedValues[0]
  address.value.cityCode = data.selectedValues[1]
  address.value.countyCode = data.selectedValues[2]
  const province = areaColumns.value?.province_list[data.selectedValues[0]]
  const city = areaColumns.value?.city_list[data.selectedValues[1]]
  const county = areaColumns.value?.county_list[data.selectedValues[2]]
  address.value.fullLocation = `${province} ${city} ${county}`
  showLocationPopup.value = false
}

// 3 设为默认地址
const isDefault = computed({
  set(value) {
    if (address.value) {
      address.value.isDefault = value ? 0 : 1
    }
  },
  get() {
    return address.value?.isDefault === 0
  },
})

// 4 提交
const loading = ref(false)
const router = useRouter()
const onSubmit = async () => {
  if (!address.value.receiver) {
    return showToast('请输入收货人')
  }
  if (!address.value.contact) {
    return showToast('请输入手机号码')
  }
  // if (!/^1[1-9]\d{9}$/.test(address.value.contact)) {
  //   return showToast('手机号码格式不对')
  // }
  if (!address.value.provinceCode) {
    return showToast('请选择所在区')
  }
  if (!address.value.address) {
    return showToast('请输入详细地址')
  }
  try {
    loading.value = true
    if (route.params.id) {
      await request.put(`member/address/${address.value.id}`, address.value)
    } else {
      await request.post('member/address', address.value)
    }
    loading.value = false
    showToast('保存成功')
    router.back()
  } catch (e) {
    showToast('保存失败')
    loading.value = false
  }
}
</script>

<template>
  <div class="address-edit-page">
    <van-cell-group>
      <van-field
        v-model="address.receiver"
        label="收货人"
        placeholder="请输入收货人"
      ></van-field>
      <van-field
        v-model="address.contact"
        label="手机号码"
        placeholder="请输入手机号码"
      ></van-field>
      <van-field
        v-model="address.fullLocation"
        label="所在地区"
        placeholder="请输入所在地区"
        readonly
        @click="showLocationPopup = true"
      ></van-field>
      <van-popup v-model:show="showLocationPopup" round position="bottom">
        <van-area
          :area-list="areaColumns"
          @confirm="onSelectedLocation"
        ></van-area>
      </van-popup>
      <van-field
        v-model="address.address"
        label="详细地址"
        type="textarea"
        placeholder="请输入详细地址"
      >
      </van-field>
      <van-field label="设为默认地址" readonly>
        <template #extra>
          <van-checkbox
            v-model="isDefault"
            :icon-size="20"
            checked-color="var(--mk-red)"
          ></van-checkbox>
        </template>
      </van-field>
    </van-cell-group>
    <div class="submit">
      <van-button
        round
        block
        type="primary"
        @click="onSubmit"
        :loading="loading"
      >
        保存
      </van-button>
    </div>
  </div>
</template>
<style lang="css" scoped>
.address-edit-page {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding-bottom: 80px;
}

.submit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 16px;
  height: 80px;
}

.geo {
  width: 250px;
  height: 250px;
  overflow-y: auto;
}

.geo-title {
  font-size: 14px;
  color: var(--mk-gray);
  padding: 8px;
}

.geo-item {
  border-top: 0.5px solid var(--mk-under);
  padding: 8px;
}

.geo-item-label {
  font-size: 14px;
  color: var(--mk-red);
}

.geo-item-value {
  font-size: 12px;
  color: var(--mk-gray);
}
</style>
